<template>
	<SecondTitle title="列车信息">
		<template #right>
			<div class="rightSlot">
				<input type="text" v-model="name" :placeholder="'请输入车次'" />
				<div class="btn" @click="search">查询</div>
				<div class="btn" @click="reset">重置</div>
			</div>
		</template>
	</SecondTitle>
	<div class="table-wrap" ref="tableRef">
		<el-table
			:data="tableData"
			style="width: 100%"
			:height="resetSize(600)"
			class="c-table"
			header-row-class-name="t-head"
			header-cell-class-name="t-head-cell"
			cell-class-name="t-body-cell"
			row-class-name="t-body-row"
			align="center"
		>
			<el-table-column prop="trainNo" label="车次" />
			<el-table-column prop="type" label="类型" />
			<el-table-column prop="startStation" label="始发站" />
			<el-table-column prop="endStation" label="终点站" />
			<el-table-column prop="departureTime" label="出发时间" />
			<el-table-column prop="endStation" label="到达时间" />

			<el-table-column prop="status" label="状态">
				<template #default="{ row }">
					<span
						:style="{
							color: row.status == '正在检票' ? '#fff' : row.status == '正在候车' ? '#17E690' : '#2DA7FC',
						}"
						>{{ row.status }}</span
					>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			class="c-pagination"
			:teleported="false"
			popper-class="c-popper"
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:page-sizes="[10, 20, 50, 100]"
			:size="'small'"
			layout="total,  prev, pager, next, sizes"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>
<script lang="ts" setup>
	import { computed, onMounted, ref, watch } from 'vue'
	import { resetSize } from '@/utils/reset'
	import { getTrainInfoList, trainInfoList } from '@/global'
	import { useScroll } from '@/hooks/useScroll'
	import { getTrainList } from '@/api/train'
	// const tableData = [
	// 	{
	// 		name: 'G0512',
	// 		end: '长沙南站',
	// 		startTime: '10:53',
	// 		wait: '一层',
	// 		entrance: 'A1',
	// 		platform: '2',
	// 		status: '正在检票',
	// 	},
	// 	{
	// 		name: 'G0311',
	// 		end: '南京站',
	// 		startTime: '10:53',
	// 		wait: '二层',
	// 		entrance: 'A2',
	// 		platform: '2',
	// 		status: '正在候车',
	// 	},
	// 	{
	// 		name: 'G0612',
	// 		end: '惠州南站',
	// 		startTime: '10:53',
	// 		wait: '一层',
	// 		entrance: 'B1',
	// 		platform: '2',
	// 		status: '预计正点',
	// 	},
	// 	{
	// 		name: 'G03512',
	// 		end: '深圳站',
	// 		startTime: '10:53',
	// 		wait: '一层',
	// 		entrance: 'C1',
	// 		platform: '2',
	// 		status: '正在检票',
	// 	},
	// 	{
	// 		name: 'G0512',
	// 		end: '惠州南站',
	// 		startTime: '10:53',
	// 		wait: '二层',
	// 		entrance: 'A1',
	// 		platform: '2',
	// 		status: '正在检票',
	// 	},
	// 	{
	// 		name: 'G0512',
	// 		end: '长沙南站',
	// 		startTime: '10:53',
	// 		wait: '一层',
	// 		entrance: 'A1',
	// 		platform: '2',
	// 		status: '正在检票',
	// 	},
	// 	{
	// 		name: 'G0512',
	// 		end: '长沙南站',
	// 		startTime: '10:53',
	// 		wait: '一层',
	// 		entrance: 'A1',
	// 		platform: '2',
	// 		status: '正在检票',
	// 	},
	// ]
	const name = ref()
	const currentPage = ref(1)
	const pageSize = ref(10)
	const tableData = ref()
	const tableRef = ref()
	const total = ref(0)
	const searchList = ref<any>([])
	// getTrainInfoList()
	const scrollInfo = ref<any>({})

	const getTrainListFunc = async (name: string) => {
		let params = {
			pageSize: pageSize.value,
			pageNum: currentPage.value,
			name: name ? name : ''
		}
		await getTrainList(params).then((res: any) => {
			tableData.value = res.data.records;
			total.value = res.data.total
		})
	}

	onMounted( async () => {
		await getTrainListFunc('');
		scrollInfo.value = useScroll(tableRef.value, currentPage, trainInfoList, pageSize)
	})
	const handleSizeChange = async (pageNum: any) => {
		console.log("handleSizeChange=======", pageNum, " name.value is ", name.value);
		await getTrainListFunc(name.value)
	}
	const handleCurrentChange = async () => {
		console.log("handleCurrentChange====== name.value is ", name.value);
		await getTrainListFunc(name.value)
	}
	// const getData = (list: any) => {
	// 	scrollInfo.value.scrollTop = 0
	// 	scrollInfo.value.setScroll()
	// 	let start = pageSize.value * (currentPage.value - 1)
	// 	let end = currentPage.value * pageSize.value
	// 	tableData.value = list.slice(start, end)
	// 	total.value = list.length
	// }

	// watch(
	// 	trainInfoList,
	// 	(list: any) => {
	// 		console.log('list', list)

	// 		if (list.length) {
	// 			let start = pageSize.value * (currentPage.value - 1)
	// 			let end = currentPage.value * pageSize.value
	// 			tableData.value = list.slice(start, end)
	// 			total.value = list.length
	// 		}
	// 	},
	// 	{ deep: true, immediate: true },
	// )

	const search = async () => {
		await getTrainListFunc(name.value);
		console.log("search=========")
		// searchList.value = trainInfoList.value.filter((item: any) => {
		// 	return item.name.includes(name.value)
		// })
		// getData(searchList.value)
	}
	const reset = async () => {
		name.value = ""
		await getTrainListFunc('');
		// name.value = undefined
		// currentPage.value = 1
		// getData(trainInfoList.value)
	}
</script>

<style lang="scss" scoped>
// 	.table-wrap :deep(.el-pagination .btn-prev){
// 		height: 40px;
// 	}
// 	.table-wrap :deep(.el-pagination .btn-next){
// 		height: 40px;
// 	}
// 	.table-wrap :deep(.el-pagination .el-pager .number){
// 		font-size: 25px;
// 		height: 40px;
// 	}
	.table-wrap :deep(.el-pagination__total){
		// font-size: 30px;
	}
	.table-wrap :deep(.el-pagination__sizes .el-select .el-select__selected-item span) {
		// font-size: 25px;  /* 输入框文字大小 */
		color: #fff;
	}

	/* 修改分页选择器的下拉菜单文字 */
	.table-wrap :deep(.el-pagination__sizes .el-select .el-popper .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-select-dropdown__item span) {
		// font-size: 25px;  /* 下拉选项文字大小 */
		color: #fff;
	}

	/* 修改分页选择器下拉菜单整体 */
	.el-pagination--small button, .el-pagination--small span {
		// font-size: 25px;  /* 下拉菜单统一字体 */
	}
</style>
